<template>
  <div class="huaweiyun">
    <el-row :gutter="20" class="mbg20">
      <el-col :span="4">
        <el-row>
          <el-col :span="15">
            <el-card shadow="always " :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <!-- <i class="el-icon-user-solid grid-con-icon"></i> -->
                <div class="grid-cont-right">
                  <div class="grid-name">ECS总台数:</div>
                  <div class="grid-num" @click="dialogVisible = true">
                    <!-- <el-tag size="medium">{{ tabbar }}</el-tag> -->
                    <el-button type="info" round> {{ tabbar }}</el-button>
                    <el-dialog title="展示数据" v-model="dialogVisible" width="70%" :before-close="handleClose">
                      <el-button v-for="(item,index) in buttons" :key="'buttons'+index"
                        @click="getfindGroupTree(item, index)"
                        :class="packetIndex === index ? 'el-button focus' : 'el-button'">{{item.name}}
                      </el-button>
                      <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
                        <template v-for="(item,index) in tablebar" :key="index">
                          <el-table-column :prop="item.property" :label="item.label">
                          </el-table-column>
                        </template>
                      </el-table>
                      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" :current-page="currentPage"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                      </el-pagination>


                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="dialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                      </template>
                    </el-dialog>


                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { listZones, listServers } from '@/utils/common.js';

  export default {
    data() {
      return {
        dialogVisible: false,
        tabbar: [],

        currentPage: 1,
        pagesize: 10,
        buttons: [
          { index: 0, name: "华东-上海二" },
          { index: 1, name: "华东-上海一" },
          { index: 2, name: "华南-广州" },
          { index: 3, name: "西南-贵阳一" },
          { index: 4, name: "亚太-曼谷" },
          { index: 5, name: "亚太-香港" },
          { index: 6, name: "亚太-新加坡" },
          { index: 7, name: "非洲-约翰内斯堡" },
          { index: 8, name: "华北-北京四" },
          { index: 9, name: "华北-北京一" },
        ],

        packetIndex: 0,
        tableData: [],
        tablebar: [
          { property: "name", label: "主机名" },
          { property: "addresses", label: "主机IP" },
          { property: "os_size", label: "主机磁盘" },
          { property: "ram", label: "主机内存" },
          { property: "vcpus", label: "主机CPU" },
          { property: "image_name", label: "主机OS" },
          { property: "os_bit", label: "主机BIT" },
          { property: "os_type", label: "主机类别" },
          { property: "host_status", label: "主机状态" },
          { property: "created", label: "主机创建时间" },
        ]
      }
    },

    methods: {
      async listZoneData() {
        await listZones().then(res => {
          this.tabbar = res
          console.log(res)

        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      async getfindGroupTree(item, index) {
        console.log(item)
        this.packetIndex = index
        let value = item.name
        await listServers(value).then(res => {
          this.tableData = res
          // console.log("xxx_______________", res)

          // 重改数组addresses增加空格
          // for (let k = 0; k < res.length; k++) {
          //   let tempArray = [];
          //   for (let i = 0; i < this.tableData[k].addresses.length; i++) {
          //     tempArray.push(this.tableData[k].hostconf["disk"])
          //   }
          //   console.log("kkk____________", tempArray)
          //   this.tableData[k].addresses = tempArray
          // }

          // console.log(res)
        })
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        console.log(`每页 ${currentPage} 条`);
      },
      handleSizeChange: function (pagesize) {
        this.pagesize = pagesize;
        console.log(`当前页: ${pagesize}`);
      }
    },

    mounted() {
      this.listZoneData()
    },
  }

</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }

  .grid-content {
    display: flex;
    align-items: center;
    height: 100px;
  }

  .grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
  }

  .grid-name {
    font-size: 20px;
    font-weight: bold;
    color: lightslategrey;
  }

  .grid-num {
    font-size: 25px;
    font-weight: bold;
    color: rgb(16, 204, 31);
  }

  .grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: rgb(72, 18, 197);
  }

  .grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
  }

  .grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
  }

  /* .grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
  }

  .grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
  }

  .grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
  }

  .grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
  } */
</style>